<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 学科管理 -->
   <el-row :gutter="20" type="flex" class="row-bg" justify="space-between">
       <!-- 左侧查询学科 -->
   <el-col :span="21">
      <div class="grid-content bg-purple">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="学科名称">
        <el-input v-model="form.subjectName"></el-input>
         </el-form-item>
           <el-form-item>
       <el-button @click="resetipt">清除</el-button>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>
      </el-form>
      </div>
      </el-col>
      <!-- 右侧新增学科 -->
    <el-col :span="3">
      <div class="grid-content bg-purple">
          <el-button type="success" icon="el-icon-edit" @click="addsubject">新增学科</el-button>
      </div>
      </el-col>
</el-row>
<!-- 警告栏 -->
  <el-alert
    type="info"
    show-icon
     :closable="false"
    >
    <template slot="title">
<span>
    数据一共{{counts}}条
</span>
    </template>
  </el-alert>

  <!-- 学科列表 -->
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
       type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科名称"
       >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
       <el-table-column
        prop="addDate"
        label="创建日期">
      </el-table-column>
       <el-table-column
        prop="isFrontDisplay"
        label="前台是否显示">
      </el-table-column>
       <el-table-column
        prop="twoLevelDirectory"
        label="二级目录">
      </el-table-column>
       <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
       <el-table-column
        prop="totals"
        label="题目数量">
      </el-table-column>
       <!-- 操作 -->
        <el-table-column label="操作" width="250px">
      <template slot-scope="scope">

        <el-button @click="subjectRow(scope.row)" type="text" size="small">学科分类</el-button>
       <el-button @click="tagRow (scope.row)" type="text" size="small">学科标签</el-button>
       <el-button @click="updateRow(scope.row)" type="text" size="small">修改</el-button>
       <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>

      </template>
    </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-row type="flex" justify="end" >
    <el-pagination
   background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      :page-sizes="[5, 10, 20, 50]"
      :page-size="data.pagesize"
      :current-page="data.page"

       layout=" prev, pager, next, sizes, jumper"
      :total="counts">
    </el-pagination>
</el-row>

<!-- 新增学科表单 -->
<el-dialog :title="isupdate?'修改学科':'新增学科'" :visible.sync="dialogFormVisible" >
 <el-form ref="addsubjectform" :model="addsubjectform" label-width="80px" :rules="addsubjectrules">
  <el-form-item label="学科名称" prop="subjectName">
    <el-input v-model="addsubjectform.subjectName" ></el-input>
  </el-form-item>
  <!-- 前台是否显示 -->
   <el-form-item label="是否显示">
    <el-switch v-model="addsubjectform.isFrontDisplay" active-color="#13ce66"></el-switch>
  </el-form-item>
    <el-form-item>
    <el-button @click="cancleadd">取消</el-button>
    <el-button type="primary" @click="addsure">确认</el-button>

  </el-form-item>
  </el-form>
</el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { list, add, detail, update, remove } from '@/api/hmmm/subjects'

// import {status} from '@/api/hmmm/constants'
// 格式化时间
import { crtTimeFtt } from '@/filters'
export default {
  data () {
    return {
      // 搜索表单数据
      form: {
        subjectName: ''
      },
      // 新增/更新学科
      addsubjectform: {
        subjectName: '',
        isFrontDisplay: false,
        id: ''
      },
      addsubjectrules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      // 控制弹窗显示隐藏
      dialogFormVisible: false,
      // 表格数据
      tableData: [
        {
          subjectName: 'ha',
          creator: '11',
          addDate: '1',
          isFrontDisplay: 1,
          tags: '1',
          twoLevelDirectory: '1',
          totals: '1',
          username: '',
          id: ''
        }
      ],
      // 警告栏数据
      counts: 100,
      data: {
        // 当前页码
        page: 1,
        // 每页显示条数
        pagesize: 5,
        // 总页数
        pages: 0
      },
      // 当前页码的长度
      pagelength: '',

      // 是否是更新
      isupdate: false

    }
  },
  created () {
    setTimeout(() => {
      // ajax
      const res = {
        name: 'abc',
        list: ['潜江', '滨海', '北京'],
        province: '北京'
      }

      this.list = res.list
      this.form.name = res.name
      this.form = { name: res.name }
      // this.$set(this.form, 'province', res.province)
      this.form.province = res.province
    })

    // 页码加载获取学科列表
    this.getsubjectslist()
  },
  methods: {
    ...mapMutations('subjectlist', ['setsubjectData', 'getcataloglist']),

    // 新增确认
    addsure () {
      // 兜底验证
      this.$refs.addsubjectform.validate(async (valid) => {
        if (!valid) return
        // 添加确认
        if (!this.isupdate) {
          // 添加学科
          await add(this.addsubjectform)
          this.$message.success('添加成功')
        } else {
          await update(this.addsubjectform)
          this.$message.success('修改成功')
        }
        this.cancleadd()
        // 页码加载获取学科列表
        this.getsubjectslist()
      })
    },
    // 取消新增
    cancleadd () {
      // 重置是否更新状态
      this.isupdate = false
      // 清空数据
      this.addsubjectform.subjectName = ''
      this.addsubjectform.isFrontDisplay = false
      // 重置表单
      this.$refs.addsubjectform.resetFields()
      // 关闭弹框
      this.dialogFormVisible = false
    },
    // 新增学科
    addsubject () {
      this.isupdate = false
      this.dialogFormVisible = true
    },
    // 点击搜索
    onSubmit () {
      if (!this.form.subjectName) return
      // 根据输入学科名查找
      this.seachsubjects()
    },
    // 点击清除
    resetipt () {
      this.form.subjectName = ''
      // 重新拉取列表
      this.getsubjectslist()
    },
    // 学科分类
    subjectRow (row) {
    //   console.log(row)
    // 跳转到目录页
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科标签
    tagRow (row) {
      // 跳转到标签页
    //   this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 删除
    async deleteRow (row) {
      const confirmres = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmres === 'cancel') return this.$message('已取消删除')
      // 确定删除的时候需要判断长度,和当前页
      if (this.pagelength === 1) {
        this.data.page--
        if (this.data.page <= 0) {
          this.data.page = 1
        }
      }
      await remove(row)

      this.$message.success('删除成功')
      // 重新拉取列表
      this.getsubjectslist()
    },
    // 修改
    async updateRow (row) {
      // 是编辑状态
      this.isupdate = true
      // 弹框显示
      this.dialogFormVisible = true
      // 数据回填
      const res = await detail(row)
      this.addsubjectform = res.data
    },
    // 页码大小发生变动
    handleSizeChange (newsize) {
      this.data.pagesize = newsize

      // 重新拉取列表
      this.getsubjectslist()
    },
    // 当前页发生变动
    handleCurrentChange (newpage) {
      this.data.page = newpage
      //   console.log(newpage)

      // 重新拉取列表
      this.getsubjectslist()
    },
    // 获取list
    async getsubjectslist () {
      const res = await list(this.data)

      res.data.items.forEach(obj => {
        obj.isFrontDisplay = obj.isFrontDisplay === 1 ? '是' : '否'
        obj.addDate = crtTimeFtt(obj.addDate)
      })

      this.tableData = res.data.items
      this.counts = res.data.counts
      this.pagelength = res.data.items.length
      //   console.log(res.data.items)
      // 将值传到vuex中
      //   res.data.items
      this.setsubjectData(this.tableData)
    },
    // 搜索学科名进行查找
    async seachsubjects () {
      const res = await list(this.form)
      console.log(res)
      res.data.items.forEach(obj => {
        obj.isFrontDisplay = obj.isFrontDisplay === 1 ? '是' : '否'
        obj.addDate = crtTimeFtt(obj.addDate)
      })

      this.tableData = res.data.items
      this.counts = res.data.counts
    //   this.form.subjectName = ''
    }
  }
}
</script>

<style scoped>
.el-table{
    margin-top: 20px;
}
</style>
